<script setup lang="ts">
import {ref, onMounted, computed} from 'vue'
import {SearchOutlined, UndoOutlined} from '@ant-design/icons-vue';
import type {SelectProps} from 'ant-design-vue';

type SearchForm = {
  key: null | string,
  school: null | number,
  major: null | number,
  year: null | string,
}

//查询条件
const searchForm = ref<SearchForm>({
  key: null,
  school: null,
  major: null,
  year: null,
})
const yearOptions = computed(() => {
  let years: SelectProps['options'] = [];
  // 从 2020 年开始，到 2100 年结束
  for (let i = 2020; i <= 2100; i++) {
    years.push({
      label: i.toString(), // 年份作为标签
      value: i.toString(), // 年份作为值
    });
  }
  return years;
});
//数据
const pagination = ref({
  page: 1,
  pageSize: 15,
  pageSizeOptions: ['15', '20', '30', '40', '50'],
  total: 0,
})
const dataLoading = ref<boolean>(false);
const columns = ref([
  {
    title: 'No.',
    dataIndex: 'index',
    width: 70,
    align: 'center',
  },
  {
    title: '院校代码',
    dataIndex: 'order_sn',
    width: 100,
  },
  {
    title: '院校名称',
    dataIndex: 'order_sn',
  }, {
    title: '专业代码',
    dataIndex: 'order_sn',
    width: 100,
  }, {
    title: '专业名称',
    dataIndex: 'order_sn',
  },
  {
    title: '年份',
    dataIndex: 'order_sn',
    width: 100,
  },
  {
    title: '最低分数线',
    dataIndex: 'order_sn',
    width: 100,
  },
  {
    title: '招生人数',
    dataIndex: 'order_sn',
    width: 100,
  },
  {
    title: '报名人数',
    dataIndex: 'order_sn',
    width: 100,
  },
])
const dataList = ref<any[]>([])
//切换页码
const changePage = (page: number, pageSize: number) => {
  pagination.value.page = page;
  pagination.value.pageSize = pageSize;
  getDataList()
}
//查询
const getDataList = () => {
  dataLoading.value = true;
  dataList.value = []; // 确保每次查询时清空数据列表

  for (let i = 0; i < pagination.value.pageSize; i++) {
    const order_sn = `ORD${Math.floor(Math.random() * 1000000)}`; // 生成随机订单号
    const phone = `138${Math.floor(Math.random() * 100000000)}`; // 生成随机手机号码，假设以 138 开头

    // 随机生成创建时间
    const createDate = new Date(Date.now() - Math.floor(Math.random() * 10000000000));
    const create_at = formatDate(createDate); // 格式化创建时间

    // 随机生成处理时间，有可能为空
    const processingDate = Math.random() > 0.5 ? new Date(Date.now() - Math.floor(Math.random() * 10000000000)) : null;
    const processing_at = processingDate ? formatDate(processingDate) : ''; // 格式化处理时间
    // 随机生成 status，值为 0 或 1
    const status = Math.random() > 0.5 ? 1 : 0;
    dataList.value.push({
      order_sn: order_sn,
      name: `Edward ${i}`,
      phone: phone,
      create_at: create_at,
      status: status,
      processing_at: processing_at,
    });
  }
  console.log(searchForm.value)
  pagination.value.total = 100;
  dataLoading.value = false;
}
// 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
onMounted(() => {
  getDataList()
})

</script>
<template>
  <a-card>
    <a-form
        layout="inline"
        :model="searchForm"
        @keyup.enter="getDataList">
      <a-form-item label="代码">
        <a-input v-model:value="searchForm.key" style="width: 180px" placeholder="院校或专业代码查询..."
                 allow-clear/>
      </a-form-item>
      <a-form-item label="院校">
        <a-select v-model:value="searchForm.school" :options="[]" style="width: 240px"
                  placeholder="请选择" allow-clear/>
      </a-form-item>
      <a-form-item label="专业">
        <a-select v-model:value="searchForm.major" :options="[]" style="width: 240px"
                  placeholder="请选择" allow-clear/>
      </a-form-item>
      <a-form-item label="年份">
        <a-select v-model:value="searchForm.year" :options="yearOptions" style="width: 100px"
                  placeholder="请选择" allow-clear/>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="getDataList">
            <template #icon>
              <SearchOutlined :style="{fontSize: '16px',position: 'relative',top:'-2px'}"/>
            </template>
            查询
          </a-button>
          <a-button
              @click="()=>{searchForm.key=null;searchForm.school=null;searchForm.major=null;searchForm.year=null}">
            <template #icon>
              <UndoOutlined :style="{fontSize: '16px',position: 'relative',top:'-2px'}"/>
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div style="margin: 10px 0">
      <a-alert message="报名人数指的是当前系统中已报名的人数" type="warning" show-icon/>
    </div>
    <div style="margin-top: 10px">
      <a-table :columns="columns" :data-source="dataList"
               :loading="dataLoading"
               :pagination="false"
               size="small" bordered :scroll="{y: 700}">
        <template #bodyCell="{ column,index }">
          <template v-if="column.dataIndex === 'index'">
            {{ (index + 1) + (pagination.page - 1) * pagination.pageSize }}
          </template>
        </template>
        <template #emptyText>
          <a-empty>
            <template #description>
              暂无相关数据
            </template>
          </a-empty>
        </template>
      </a-table>
      <div style="margin-top: 10px; display: flex; justify-content: end;">
        <a-pagination
            size="small"
            v-model:current="pagination.page"
            v-model:pageSize="pagination.pageSize"
            :page-size-options="pagination.pageSizeOptions"
            show-size-changer
            show-quick-jumper
            :total="pagination.total"
            @change="changePage"
            :show-total="(total: number) => `共 ${total} 条`">
          <template #buildOptionText="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </a-card>
</template>

<style scoped lang="scss">

</style>